<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue解析数据案例</title>

    <!-- 导入js -->
    <script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>

</head>

<body>
    <div id="app">
        <h2>
            vue解析变量：{{str}} {{str.length}}
            {{str.replace('l','666')}} {{str.concat(123)}}
            {{num}} {{num+10}} {{num/3}} {{num%4}}
            {{num>5?1:0}} {{num--}}
        </h2>

        <h2>vue解析对象：{{p.name}} {{p.age}} </h2>
        <h2>vue解析对象中的方法：{{p.sleep()}} </h2>
        <h2>vue解析对象中的含参方法：{{p.eat(3)}} </h2>

        <h2>vue解析数组：{{arr[1].name}} {{arr[0].age}} </h2>

        <h2>vue调用函数的语法:{{show()}} </h2>

        <button v-on:click="add(1,2)">点我</button>
        <button @click="add(3,4)">点我</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app", //数据挂载点
            data: {
                str: "hello vue",
                num: 10,
                p: { //vue定义对象
                    name: "lisa",
                    age: 20,
                    //给对象P提供方法
                    sleep: function(){
                        console.log("调用成功！！")
                    },
                    eat: function(nums){
                        //返回的nums不是对象中定义的，而是调用方法时传入的，所以不需要加this关键字
                        console.log(this.name +"吃了" + nums + "碗大米饭！")
                    },
                },
                arr: [ //vue定义数组
                    {
                        name: "zhangsan",
                        age: 20
                    },
                    {
                        name: "wangwu",
                        age: 30
                    }
                ]
            },
            methods: { //vue定义方法
                show: function () {
                    console.log(100);
                },
                add: function (a, b) { //含参方法
                    console.log(a + b);
                }
            }
        })
    </script>
</body>

</html>